<template>
  <el-card>
    商品规格
    <div class="aaa" :class="www ? 'bbb' : 'nnn'">测试动画</div>
    <el-button @click="eee">点击</el-button>
  </el-card>
</template>

<script>
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    components: {},
    setup() {
      const www = ref(false)
      const eee = () => {
        www.value = !www.value
        console.log(1)
      }

      return {
        www,
        eee
      }
    }
  })
</script>

<style type="less">
  @keyframes xxx {
    from {
      width: 200px;
    }
    to {
      width: 64px;
    }
  }
  @keyframes ccc {
    from {
      width: 64px;
    }
    to {
      width: 200px;
    }
  }
  .bbb {
    animation: xxx 0.4s 0.1s ease both;
    transition: all 0.5s none;
  }
  .nnn {
    animation: ccc 0.4s 0.1s ease both;
    transition: all 0.5s none;
  }
  .aaa {
    width: 200px;
    height: 60px;
    background-color: pink;
  }
  .eee {
    background-color: #fff;
    border-radius: 5px;
  }
</style>
